<template>
  <div>
    <!-- sap入口检验数据表单弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="1100px"
      draggable
      :align-center="true"
      @close="closeDialog"
      destroy-on-close
      style="min-width: 1100px"
      class="maxhDialog"
    >
      <el-descriptions :column="3" size="large" border v-if="props.isReadonly">
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">集团</div>
          </template>
          {{ formData.ci || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">检验批次号</div>
          </template>
          {{ formData.inspLot || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">物料号</div>
          </template>
          {{ formData.material || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">批次</div>
          </template>
          {{ formData.batch || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">node</div>
          </template>
          {{ formData.node || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">检验特性编号</div>
          </template>
          {{ formData.charCode || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">检验特性</div>
          </template>
          {{ formData.charName || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">结果编号</div>
          </template>
          {{ formData.resultNo || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">录入用户账号</div>
          </template>
          {{ formData.createdBy || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">录入时间</div>
          </template>
          {{ formData.createdOn || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">变更用户账号</div>
          </template>
          {{ formData.changedBy || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">变更时间</div>
          </template>
          {{ formData.changedOn || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">sample</div>
          </template>
          {{ formData.sample || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">no</div>
          </template>
          {{ formData.no || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">检验人</div>
          </template>
          {{ formData.inspector || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">检验开始时间</div>
          </template>
          {{ formData.startTime || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">检验结束时间</div>
          </template>
          {{ formData.endTime || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">ni</div>
          </template>
          {{ formData.ni || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">测量值</div>
          </template>
          {{ formData.originalValue || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">单位</div>
          </template>
          {{ formData.unit || "" }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template #label>
            <div class="cell-item">采集时间</div>
          </template>
          {{ formData.createTime || "" }}
        </el-descriptions-item>
      </el-descriptions>

      <el-form
        ref="formRef"
        v-if="!props.isReadonly"
        :model="formData"
        :rules="rules"
        label-width="160"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="集团" prop="ci">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.ci"
                placeholder="请输入集团"
                clearable
              />

              <span v-else>{{ formData.ci }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验批次号" prop="inspLot">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.inspLot"
                placeholder="请输入检验批次号"
                clearable
              />

              <span v-else>{{ formData.inspLot }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料号" prop="material">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.material"
                placeholder="请输入物料号"
                clearable
              />

              <span v-else>{{ formData.material }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="批次" prop="batch">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.batch"
                placeholder="请输入批次"
                clearable
              />

              <span v-else>{{ formData.batch }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="node" prop="node">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.node"
                placeholder="请输入node"
                clearable
              />

              <span v-else>{{ formData.node }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验特性编号" prop="charCode">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.charCode"
                placeholder="请输入检验特性编号"
                clearable
              />

              <span v-else>{{ formData.charCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验特性" prop="charName">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.charName"
                placeholder="请输入检验特性"
                clearable
              />

              <span v-else>{{ formData.charName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结果编号" prop="resultNo">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.resultNo"
                placeholder="请输入结果编号"
                clearable
              />

              <span v-else>{{ formData.resultNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入用户账号" prop="createdBy">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.createdBy"
                placeholder="请输入录入用户账号"
                clearable
              />

              <span v-else>{{ formData.createdBy }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间" prop="createdOn">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.createdOn"
                placeholder="请输入录入时间"
                clearable
              />

              <span v-else>{{ formData.createdOn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变更用户账号" prop="changedBy">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.changedBy"
                placeholder="请输入变更用户账号"
                clearable
              />

              <span v-else>{{ formData.changedBy }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变更时间" prop="changedOn">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.changedOn"
                placeholder="请输入变更时间"
                clearable
              />

              <span v-else>{{ formData.changedOn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="sample" prop="sample">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.sample"
                placeholder="请输入sample"
                clearable
              />

              <span v-else>{{ formData.sample }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="no" prop="no">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.no"
                placeholder="请输入no"
                clearable
              />

              <span v-else>{{ formData.no }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验人" prop="inspector">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.inspector"
                placeholder="请输入检验人"
                clearable
              />

              <span v-else>{{ formData.inspector }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验开始时间" prop="startTime">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.startTime"
                placeholder="请输入检验开始时间"
                clearable
              />

              <span v-else>{{ formData.startTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验结束时间" prop="endTime">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.endTime"
                placeholder="请输入检验结束时间"
                clearable
              />

              <span v-else>{{ formData.endTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ni" prop="ni">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.ni"
                placeholder="请输入ni"
                clearable
              />

              <span v-else>{{ formData.ni }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="测量值" prop="originalValue">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.originalValue"
                placeholder="请输入测量值"
                clearable
              />

              <span v-else>{{ formData.originalValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.unit"
                placeholder="请输入单位"
                clearable
              />

              <span v-else>{{ formData.unit }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采集时间" prop="createTime">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.createTime"
                placeholder="请输入采集时间"
                clearable
              />

              <span v-else>{{ formData.createTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!props.isReadonly"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
            >确 定</el-button
          >
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "ETLSAPENTRYINSPECTIONDATAADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      if (formRef.value?.clearValidate) {
        formRef.value && formRef.value.clearValidate();
      }
    }, 50);
  }
);

const rules = reactive({
  ci: [],
  inspLot: [],
  material: [],
  batch: [],
  node: [],
  charCode: [],
  charName: [],
  resultNo: [],
  createdBy: [],
  createdOn: [],
  changedBy: [],
  changedOn: [],
  sample: [],
  no: [],
  inspector: [],
  startTime: [],
  endTime: [],
  ni: [],
  originalValue: [],
  unit: [],
  createTime: [],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  ci: "",
  inspLot: "",
  material: "",
  batch: "",
  node: "",
  charCode: "",
  charName: "",
  resultNo: "",
  createdBy: "",
  createdOn: "",
  changedBy: "",
  changedOn: "",
  sample: "",
  no: "",
  inspector: "",
  startTime: "",
  endTime: "",
  ni: "",
  originalValue: "",
  unit: "",
  createTime: "",
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        ci,
        inspLot,
        material,
        batch,
        node,
        charCode,
        charName,
        resultNo,
        createdBy,
        createdOn,
        changedBy,
        changedOn,
        sample,
        no,
        inspector,
        startTime,
        endTime,
        ni,
        originalValue,
        unit,
        createTime,
      } = newVal;
      Object.assign(formData, {
        id,
        ci,
        inspLot,
        material,
        batch,
        node,
        charCode,
        charName,
        resultNo,
        createdBy,
        createdOn,
        changedBy,
        changedOn,
        sample,
        no,
        inspector,
        startTime,
        endTime,
        ni,
        originalValue,
        unit,
        createTime,
      });
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  if (formRef.value?.resetFields) {
    formRef.value.resetFields();
    formRef.value.clearValidate();
  }
  formData.id = "";
  formData.ci = "";
  formData.inspLot = "";
  formData.material = "";
  formData.batch = "";
  formData.node = "";
  formData.charCode = "";
  formData.charName = "";
  formData.resultNo = "";
  formData.createdBy = "";
  formData.createdOn = "";
  formData.changedBy = "";
  formData.changedOn = "";
  formData.sample = "";
  formData.no = "";
  formData.inspector = "";
  formData.startTime = "";
  formData.endTime = "";
  formData.ni = "";
  formData.originalValue = "";
  formData.unit = "";
  formData.createTime = "";
}

const loading = ref(false);

/** sap入口检验数据保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/pqd-etl/sapentryinspectiondata/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
<style lang="scss" scoped>
:deep(.maxhDialog .el-dialog__body) {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
}
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 120px;
}
:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
  min-width: 180px;
}
</style>
